import React, { FC } from 'react';

import { getBuildResourceFunc } from '@libs/common/utils/resource.utils';

import { ResumeTmpl, ResumeTmplModel } from './tmpl';
import { getPageUrl, PageAlias, RouteBuilder } from '@libs/common/router';

const COM_PREKEY = 'ResumeTmplList';

interface ResumeTmplListProps {}

const ResumeTmplList: FC<ResumeTmplListProps> = (props) => {
    const buildResourceFunc = getBuildResourceFunc('tmpls');

    const tmpls: ResumeTmplModel[] = [
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-cool-rtl.3f131e9.png'),
            href: getPageUrl(PageAlias.ResumeTemplateDetail, { id: 5 }),
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-cool-rtl2.196de27.png'),
            href: getPageUrl(PageAlias.ResumeTemplateDetail, { id: 5 }),
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-cool.ab886b2.png'),
            href: getPageUrl(PageAlias.ResumeTemplateDetail, { id: 5 }),
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-creative.28c13b5.png'),
            href: getPageUrl(PageAlias.ResumeTemplateDetail, { id: 5 }),
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-green.b3219b5.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-left-right-projects.4c8ad98.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-left-right-rtl.72d9266.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-left-right.e77ec0f.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-material-dark-projects.b806111.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-material-dark.451a6ed.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-oblique-projects.6641f1f.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-oblique-rtl.a9bfb54.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-oblique.42d29b4.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-purple.9cafdf0.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-side-bar-projects.5538190.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-side-bar-rtl.3184eb3.png'),
            href: 'http://test',
        },
        {
            title: 'cool !!!!!!',
            img: buildResourceFunc('resume-side-bar.0ce20de.png'),
            href: 'http://test',
        },
    ];

    return (
        <ul className="rsm-lst">
            <li className="rsm-wrp">
                <ResumeTmpl isEmpty href="http://test" />
            </li>
            {tmpls.map((tmpl, index) => {
                return (
                    <li key={`${COM_PREKEY}_${index}`} className="rsm-wrp">
                        <ResumeTmpl {...tmpl} />
                    </li>
                );
            })}
        </ul>
    );
};

ResumeTmplList.displayName = 'ResumeTmplList';

export { ResumeTmplList, ResumeTmplListProps };
